import React, { useEffect, useState } from "react";
import { Breadcrumb } from "antd";
import { useLocation } from "react-router-dom";
import { siderRoutes } from "../../router/routes";

const Index = () => {
  // 容器数据
  const [list, setList] = useState([
    {
      path: "/manage",
      title: "数据管理",
    },
    {
      path: "/manage/list",
      title: "列表管理",
    },
  ]);
  // 获取访问路径
  const { pathname } = useLocation();

  useEffect(() => {
    const result = []
    const arr = pathname.slice(1).split('/').map(v => '/' + v);
    let str = ''
    arr.forEach(v => {
      str += v;
      result.push(str)
    })

    const result1 = result.map(v => {
      const item = siderRoutes.reduce((p, n) => {
        return n.children ? p.concat(n, n.children) : p.concat(n)
      }, []).find(item => item.path === v)

      return {
        path: v,
        title: item?.meta.title
      }
    })
    setList(result1)
  }, [pathname])
  return (
    <div style={{ margin: "20px 0" }}>
      <Breadcrumb items={list}></Breadcrumb>
    </div>
  );
};

export default Index;
